<template>
	<view class="min100 plr-30 gray-2 ptb-20">
		<!-- <u-tabs font-size="26" active-color="#44ACFF" inactive-color="#999" bg-color="transparent" :list="tabs"
			:is-scroll="true" :current="current" @change="change"></u-tabs> -->
		<u-tabs :list="tabs" :current="current" @change="change" :bold='false'></u-tabs>
		<empty v-if="list.length==0"></empty>
		<view class="root" v-else style="display: flex;flex-wrap: wrap;justify-content: space-around;">
			<view class=" mb-30 radius-20 detailBrandside" v-for="(item,index) in list"
				:key="index">
				<image :src="item.image" @click="goDetails(item,item.id)" class="itemImg mr-20 radius-20"></image>
				<view class="detailBrandside_bottom_bg">
					<view  >
						<view class="gray size-30 mb-20" @click="goDetails(item,item.id)">
							{{item.name}}
						</view>
						<view class="flex-between flex1 mt-20" >
							<view class="flex1" style="align-items: center;">
								<view class="diamondMall_limit">
									<image :src="item.author_image" mode="" class="photo"
										style="border-radius: 50%;"></image>
								</view>
								<view class="diamondMall_number ml-10 size-26">
									{{item.author_name}}
								</view>
							</view>
						</view>
						<view class="flex1 flex-between mt-25 " style="">
							<view class="size-26" style="">
								共{{item.tcount}}个
							</view>
							<image class="collection"
								:src="item.is_focus==0?'../../static/home/aixinold.png':'../../static/home/aixinnew.png'"
								v-show="showUpImg" style="width: 40rpx;height: 40rpx;" @click="changeCare(item)">
							</image>
						</view>
					<!-- 	<view class="flex flex-between red">
							<view class="size-30">
								￥{{item.price}}
							</view>
							<view class="size-24">
								<text v-if="item.status==1">持有中</text>
								<text v-if="item.status==2">挂售中</text>
								<text v-if="item.status==3">交易中</text>
								<text v-if="item.status==4">已出售</text>
								<text v-if="item.status==5">已转赠</text>
								<text v-if="item.status==6">已打开</text>
							</view>
						</view> -->
					</view>
					<!-- <view class="flex mt-20 btnWrap">
						<u-button round class="saleBtn" @click.stop="toTransfer(item.id)"
							v-if="item.status==1||item.status==2">转赠</u-button>
						<u-button round class="transferBtn" @click.stop="openBox(item.id)"
							v-if="item.status==1">拆开</u-button>
						<u-button round class="saleBtn" @click.stop="saleBox(item)" v-if="item.status==1&&is_trade==1">
							出售</u-button>
						<u-switch v-if="item.status==2" v-model="item.is_show==1?true:false" @change="upBox(item)"
							active-color="#EFAA1C">
						</u-switch>
						<text class=" size-24 ml-10" v-if="item.is_show==1&&item.status==2">已上架</text>
						<text class=" size-24 ml-10" v-if="item.is_show==0&&item.status==2">已下架</text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 转赠 -->
		<u-popup v-model="transferShow" mode="center" border-radius="20">
			<view class="plr-10 ptb-30">
				<view class="text-center bold size-32 bold">转赠</view>
				<u-field v-model="transferPhone" label-width="0" placeholder="请输入受赠人手机号" />
				<u-button @click="submitTransfer" hover-class="none" type="primary" class="mt-30">确认</u-button>
			</view>
		</u-popup>
		<!-- 改价 -->
		<u-popup v-model="changeShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">改价详情</view>
				<u-field v-model="afterPrice" l @input="getShowInput" label="价格(￥)" label-width="180" placeholder="请输入价格" type="number" />
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						平台服务费{{saleConfig.terrace_rate}}%：
					</view>
					<view class="">
						-￥{{terracePrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						作品版税{{saleConfig.author_rate}}%：
					</view>
					<view class="">
						-￥{{authorPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						支付通道使用费{{saleConfig.pay_rate}}%：
					</view>
					<view class="">
						-￥{{payPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						商品出售所得：
					</view>
					<view class="">
						￥{{realPrice.toFixed(2)}}
					</view>
				</view>
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitChange">确认
				</u-button>
			</view>
		</u-popup>
		<!-- 出售 -->
		<u-popup v-model="saleShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">出售详情</view>
				<u-field v-model="salePrice" @input="getShowInput" label="出售价格(￥)" label-width="180" placeholder="请输入价格" type="number" />
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						平台服务费{{saleConfig.terrace_rate}}%：
					</view>
					<view class="">
						-￥{{terracePrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						作品版税{{saleConfig.author_rate}}%：
					</view>
					<view class="">
						-￥{{authorPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						支付通道使用费{{saleConfig.pay_rate}}%：
					</view>
					<view class="">
						-￥{{payPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 gray-1 pl-30">
					<view class="">
						商品出售所得：
					</view>
					<view class="">
						￥{{realPrice.toFixed(2)}}
					</view>
				</view>
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitSale">确认
				</u-button>
			</view>
		</u-popup>
		<!-- 动图 -->
		<u-mask :show="gifShow" @click="gifShow = false">
			<view class="openGif">
				<image class="gifImg" :src="gifUrl"></image>
			</view>
		</u-mask>
		<!-- 拆开结果 -->
		<u-popup v-model="openPop" class="openWrap" mode="center" border-radius="20" width="500rpx;">
			<view class="popWrap text-center size-24">
				<image :src="openfig.image" class="openImg radius-20"></image>
				<view class="white mb-20 mt-40">
					{{openfig.name}}
				</view>
				<view class="gray-2">
					价值：<text class='red'>￥{{openfig.price}}</text>
				</view>
			</view>
			<image @click="openPop=false" src="../../static/close.png" class="closeIcon" mode=""></image>
		</u-popup>
		<!-- 底部弹框 -->
		<u-popup v-model="show" mode="bottom" border-radius="20" height="800rpx" closeable>
			<view class="p10">
				<view class="flex1" style="align-items: center;">
					<view class="" style="width: 100px;height: 100px;background-color: '';border-radius: 15px;">
						<image class="photo" :src="boxList.image" mode="" style="border-radius: 15px;"></image>
					</view>
					<view class="ml-20 ">
						<view class="fw size-32 black">
							{{boxList.name}}
						</view>
						<view class="mt-60 black">
							{{boxList.tcount}}个
						</view>
					</view>
				</view>
				<view class="mt-20 black">
					默认按编号排序
				</view>
				<view class="" style="display: flex;flex-wrap: wrap;width:100%;justify-content: space-between;">
					<view class="popup_price mt-40" style="" @click="gohomeDetails(item)" v-for="item in popList">
						<view class="text-right black" >
							<text class="green" v-if="item.status==1">持有中</text>
							<text class="colorRed" v-if="item.status==2">挂售中</text>
							<text class="blue" v-if="item.status==3">交易中</text>
							<text class="blue" v-if="item.status==4">已出售</text>
							<text class="blue" v-if="item.status==5">已转赠</text>
							<text class="blue" v-if="item.status==6">已打开</text>
						</view>
						<view class="text-center popup_price_2 fw black">
							￥{{item.price}}
						</view>
						<view class="text-center popup_price_2 fw mt-5" style="color: #000;">
							{{item.box_num}}
						</view>
					</view>
				</view>
		
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				showUpImg: true,
				show: false,
				gifUrl: "../../static/open.gif",
				gifShow: false, //盲盒动图
				afterPrice: '',
				changeId: '',
				changeShow: false,
				status: 0,
				openfig: {},
				openPop: false,
				saleId: '',
				salePrice: '',
				saleShow: false,
				checked: true,
				tabs: [{
						name: '全部'
					}, 
					// {
					// 	name: '持有中'
					// }, {
					// 	name: '挂售中'
					// }, {
					// 	name: '交易中'
					// },
					{
						name: '已出售'
					},
					// {
					// 	name: '已转赠'
					// },
					// {
					// 	name: '已打开'
					// }
				],
				current: 0,
				page: 1,
				pagesize: 10,
				loadStatus: 'loadmore',
				list: [],
				transferId: '',
				transferPhone: '',
				transferShow: false,
				is_trade: 0,
				saleConfig: {},
				terracePrice: 0,
				authorPrice: 0,
				payPrice: 0,
				realPrice: 0,
				boxList:[],
				popList:[]
			}
		},
		onLoad(options) {
			if (options.type) {
				this.status = Number(options.type);
				this.current = Number(options.type);
			}
			this.init();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
				
			}, 1000);
			this.init();
		},
		onShow() {
			this.$http('api/login/helpContent').then(res => {
				this.is_trade = res.is_trade;
			})
			this.$http('api/index/fee').then(res => {
				this.saleConfig = res;
			})
		},
		methods: {
			changeCare(item){
				this.$http('api/user/userFocus', {
					goods_id: item.box_id,
					type: 1
				}, 'POST').then(res => {
					console.log(res.msg);
					uni.showToast({
						title: res.msg,
					})
				});
				this.init()
			},
			toTransfer(id) {
				this.transferShow = true;
				this.transferPhone = '';
				this.transferId = id;
			},
			submitTransfer() {
				if (this.transferPhone == "") {
					uni.showToast({
						title: "请输入受赠人手机号!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/goodsTransfer', {
					id: this.transferId,
					phone: this.transferPhone
				}, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.transferShow = false;
					this.current = 5;
					this.status = 5;
					this.init();
				})
			},
			getShowInput(e){
				console.log(e)
				let saleConfig=this.saleConfig;
				this.terracePrice=e*saleConfig.terrace_rate/100;
				this.authorPrice=e*saleConfig.author_rate/100;
				this.payPrice=e*saleConfig.pay_rate/100;
				this.realPrice=e-this.terracePrice-this.authorPrice-this.payPrice;
			},
			changePrice(item) {
				this.changeShow = true;
				this.changeId = item.id;
				this.afterPrice = item.price;
				this.getShowInput(this.afterPrice);
			},
			submitChange() {
				if (this.afterPrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxUpdatePrice', {
					id: this.changeId,
					price: this.afterPrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "改价成功!",
						icon: "none"
					})
					this.changeShow = false;
					this.init();
				})
			},
			submitTransfer() {
				if (this.transferPhone == "") {
					uni.showToast({
						title: "请输入受赠人手机号!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxTransfer', {
					id: this.transferId,
					phone: this.transferPhone
				}, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.transferShow = false;
					this.current = 5;
					this.status = 5;
					this.init();
				})
			},
			goDetails(item,id) {
				this.boxList=item
				var status=0
				if(this.status==0){
					status=0
				}else{
					status=4
				}
				this.$http('api/orders/usersBoxListV1', {
					status: status,
					box_id: item.box_id
				}).then(res => {
					this.popList=res
					// console.log(res)
					for(let i=0;i<this.boxList.length;i++){
						// console.log('444')
					}
				})
				this.show = true
				
			},
			gohomeDetails(item) {
				if(this.current==1){
					
				}else{
					uni.navigateTo({
						url: "./boxDetails?id=" + item.id
					})
				}
				
				
			},
			// 出售
			saleBox(item) {
				this.saleId = item.id;
				this.salePrice = item.price;
				this.saleShow = true;
				this.getShowInput(this.salePrice);
			},
			submitSale() {
				if (this.salePrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxSale', {
					id: this.saleId,
					price: this.salePrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "出售成功!",
						icon: "none"
					})
					this.saleShow = false;
					this.current = 2;
					this.status = 2;
					this.init();
				})
			},
			openBox(id) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '立即拆开?',
					confirmColor: '#EFAA1C',
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxOpen', {
								id: id
							}, 'POST').then(res => {
								_this.gifUrl = `../../static/open.gif?${new Date().getTime()}`
								_this.gifShow = true;
								setTimeout(() => {
									_this.gifShow = false;
									_this.openfig = res;
									_this.openPop = true;
									_this.current = 6;
									_this.status = 6;
									_this.init();
								}, 3800)
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			upBox(item) {
				let _this = this;
				let msg = item.is_show == 1 ? '下架?' : '上架?';
				uni.showModal({
					title: '提示',
					content: '将此盲盒' + msg,
					confirmColor: '#44ACFF',
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxUpdateShow', {
								id: item.id,
								is_show: item.is_show == 1 ? 0 : 1
							}, 'POST').then(res => {
								uni.showToast({
									title: "操作成功!",
									icon: "none"
								})
								_this.init();
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			init() {
				this.list = [];
				// console.log(this.status)
				var status=0
				if(this.status==0){
					status=0
				}else{
					status=4
				}
				this.$http('api/orders/usersBoxListGroup', {
					status: status
				}).then(res => {
					this.list = res;
				})
			},
			change(index) {
				this.current = index;
				this.list = [];
				this.status = Number(index);
				this.init();
			}
		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #fff;
	}
	.blue,.green,.colorRed{
		color: #2979FF;
		font-size: 18rpx;
		margin-right: 10rpx;
	}
	.green{
		color: green;
	}
	.colorRed{
		color: red;
	}
	.popup_price {
		background: #F5F5F5;
		width: 220rpx;
		height: 140rpx;
		border-radius: 32rpx;
	}
	.root::after{
		content: "";
		width: 48%;
	}
	.detailBrandside {
		// width: 346rpx;
		width: 48%;
		height: 460rpx;
		margin: 0px 0px 170rpx 0px;
	
	}
	
	.itemImg {
		// width: 150rpx;
		// height: 150rpx;
		width: 100%;
		height: 70%;
		border-radius: 24rpx 24rpx 0 0;
	}
	.detailBrandside_bottom_bg{
		border: 1rpx solid #DADADA;
		border-radius: 10rpx;
		margin-top: -6rpx;
		background: url(../../static/home/detailmengban.png);
		padding: 20rpx;
		box-sizing: border-box;
		background-size: 100% 140%;
	}
	.btnWrap {
		::v-deep  uni-button {
			height: 60rpx !important;
			padding: 0 30rpx !important;
			font-size: 22rpx;
			margin-right: 10rpx;
		}

		.transferBtn {
			background: #44ACFF;
			color: #fff;
		}

		.saleBtn {
			border: 1rpx solid #44ACFF;
			background: transparent;
			color: #44ACFF;
		}
	}
	.black{
		color: #000;
	}
	.popWrap {
		background: url(../../static/openImg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 500rpx;
		height: 526rpx;
		padding-top: 128rpx;
		position: relative;

		.openImg {
			width: 240rpx;
			height: 240rpx;
			background: #666;
		}
	}

	.openWrap {
		::v-deep  .u-mode-center-box {
			background-color: transparent;
		}
	}



	.closeIcon {
		width: 60rpx;
		height: 60rpx;
		margin: 30rpx auto;
		display: block;
	}

	.openGif {
		width: 500rpx;
		height: 500rpx;
		margin: 400rpx auto 0;

		.gifImg {
			width: 500rpx;
			height: 500rpx;
		}
	}
</style>
